JavaScript入门教程

JavaScript简介

　　JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。

特点：

• 交互性（它可以做的就是信息的动态交互）
• 安全性（不允许直接访问本地硬盘）
• 跨平台性（只要是可以解释JavaScript的浏览器都可以执行，和平台无关）

JavaScript与Java不同

• JS是Netscape公司的产品，前身是LiveScript；Java是Sun公司的产品，现在是Oracle公司的产品。
• JS是基于对象，Java是面向对象。
• JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
• JS是弱类型，Java是强类型。

JavaScript与HTML的结合方式

　　想要将其他代码融入到HTML中，都是以标签的形式。

• 将JavaScript代码存放在标签对<script> js code ... </script>中
• 将JavaScript代码封装到js文件中，并通过<script>中的src属性进行导入

　　注意：如果<script>标签中使用src属性，那么该标签中存放的JavaScript代码不会被执行。所以通常导入js文件都是用单独的<script>来完成。

JavaScript语法

　　每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。

• 变量

　　　　通过关键字var来定义，弱类型即是不用指定具体的数据类型。

　　　　例如：var x = 3; x = "hello";

　　　　注：JS中特殊常量值：undefined。当变量没有初始化就被使用，该变量的值就是undefined（未定义）。JS中只有字符串没有字符，因此""、''的作用是相同的。

　　　　注意：JavaScript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。但为了符合编程规范，需要像Java一样定义结束符。而且有些情况是必须写分号的，如：var x = 3; var y = 5 如果两条语句写在同一行，就需要分号隔开。

• 运算符

　　　　算术运算符(+ - * / % ++ --)、赋值运算符、比较运算符、逻辑运算符、位运算符、三元运算符。

　　　　JavaScript中的运算符和Java大致相同。只是运算过程中需要注意几点：

1. 1. var x = 3120/1000*1000; // x = 3120而不是3000
   2. var x = 2.4 + 3.6; // x = 6而不是6.0
   3. var x = "12" + 1; // x = "121"，因为加号对于字符串是连接符
   4. var x = "12" - 1; // x = 11
   5. var x = true + 1; // x = 2，因为在js中false就是0或者null，非零，非null就是ture，默认用1表示
   6. &&  ||是逻辑运算符，& | 是位运算符
   7. 也支持三元运算符
   8. 特殊运算符typeof：返回一个操作表达式的数据类型的字符串。

   	var x = 3;
   	var y = "123";
   	var z = false;
   	typeof(x); // number
   	typeof(y); // string
   	typeof(z); // boolean;

• 语句

　　　　顺序结构、判断结构（if.else）、选择结构（switch）、循环结构、其他语句（如with：简化对象调用内容的书写）。

　　　　页面中输出九九乘法表：

　　　　　　<script type="text/javascript">
   		document.write("<table width='60%'>")
   		for(var i = 1; i < 10; i++)
   		{
   			document.write("<tr>");
   			for(var j = 1; j <= i; j++)
   			{	
   				document.write("<td>" + j + "*" + i + "=" + i*j + "</td>");
   			}
   			document.write("</tr>");
   		}
   		document.write("</table>");
　　　　　　</script>

• 数组

　　　　js中数组定义的两种方式：

• var arr=[1,2,3,4];　
• 使用JavaScript中的Array对象来完成定义。
• var arr = new Array(); // 相当于 var arr=[];
• var arr = new Array(5); // 数组定义并且长度为5
• var arr = new Array(5, 6, 7); // 定义一个数字，元素是5,6,7

 　　　　特点：长度是可变的。元素的类型是任意的。建议在使用数组时存储同一类型的元素，操作起来较为方便。

•  函数

　　　　通过指定的关键字function来定义。　　

function 函数名(参数列表){
   			函数体;
   			return 返回值; // 可省略
   		}

　　　　例如：

function add(a, b)
   		{
   			return a+b;
   		}

　　　　函数的一些细节：

• 只要使用函数的名称就是对这个函数的调用，也就是说，函数不允许重载
• 函数中有一个数组在对传入的参数进行存储，这个数组就是arguments
• 函数本身在js中就是一个对象，函数名就是对这个函数对象的引用，如果打印这个对象，那么会将该对象的字符串表示形式也就是该函数的代码定义格式打印出来　
• 匿名函数：没有名字的函数，通常是函数的简写形式

   		var add = function(a, b)
   		{
			return a + b;	
   		}
   		
   		alert(add(3, 4));

• • • 动态函数：使用的是js中内置的一个对象Function，参数列表，函数体都是通过字符串动态指定的。

   		var add = new Function("x, y", "var sum = x+y; return sum");
   		alert(add(3, 4));

• 对象，详细内容参考微软官方JScript文档。这里只介绍几个相关的知识点。

　　　　比如，为String对象添加去除两边空格的新功能：trim。

		String.prototype.trim = function(){
			var start = 0;
			var end = this.length-1;
			for(var i = 0; i < this.length; i++)
			{
				if(this.charAt(i) == " ")
					start = i+1;
				else 
					break;
			}
			for(i = end; i >= 0; i--)
			{
				if(this.charAt(i) == " ")
					end = i-1;
				else 
					break;
			}
			
			return start > end ? "" : this.substring(start, end+1);	
		}

 　　　　这里再介绍一下如何用JS自定义对象。

　　　　　　如果想要自定义对象，应该先对对象进行描述。JS是基于对象，不是面向对象的。不具备描述事物的能力。如果我们还想按照面向对象的思想编写JS，就要先描述。在JS中，可以用函数来模拟面向对象中的描述。

<script type="text/javascript">
   		// 用JS来描述人
   		function Person(){ // 相当于构造器
   			alert('one person was constructed');
   		}
   		
   		// 通过描述进行对象的建立	new
   		var p = new Person();
   		
   		// 动态给p对象添加属性。直接使用p.属性名即可
   		p.name = 'zhangsan';
   		p.age = 10;
   		
   		// 如果定义的p对象的属性赋值为一个函数，即是给p对象添加一个方法
   		p.show = function(){
   			alert('show: ' + this.name + ' : ' + this.age);
   		}
   		
   		p.show();
   		
   		/* 下面语句的输出：可以看到get和set方法是默认的
	   		name_zhangsan
			age_10
			setName_function (name){ this.name = name; }
			getName_function (name){ return this.name; }
			show_function (){ alert('show: ' + this.name + ' : ' + this.age); }
   		*/
   		var x;
   		for(x in p)
   			println(x + "_" + p[x]); 
   		/* println方法：
   		src="JSExample.js" 
   		JSExample.js:
   			function println(value){
				document.write(value+"<br/>");
			}
   		*/
   		//--------------------------------------------------------
   		// JS库中：
   		var obj = new Object();
   		obj.name = 'god';
   		alert("obj.name:" + obj.name);
   		
   		//--------------------------------------------------------
   		// 另一种描述人的方法
   		function Person(name, age){
   			// 给Person对象添加两个属性name和age
   			this.name = name;
   			this.age = age;
   			
   			this.setName = function(name){
   				this.name = name;
   			}
   			this.getName = function(name){
   				return this.name;
   			}
   		}
   		
   		var person = new Person('O(∩_∩)O', 12);
   		alert(person.getName());
   		
   		//--------------------------------------------------------
   		// 直接使用{}来定义一个实体
   		var per = {
   			// 用键值对的方式定义成员
   			"name":"lisi", "age":20,
  			"getName":function(){
  				return this.name;
  			},
  			"setName":function(name){
  				this.name = name;
  			}
   		}
   		// 对象调用成员的两种方式：对象.属性名	对象["属性名"]
   		alert(per["age"]); // per.age		
   </script>